<template>
  <div class="app-container">
    <el-card class="box-card">
      <div style="font-weight:bold;font-size: 20px">快捷入口</div>
      <div class="image">
        <div class="image1">
          <a href="javascript:" class="link" @click="onclick1">
            <img width="100px" src="src/assets/img/deviceInfo.png"/>
            <p>设备数据</p>
          </a>
        </div>
        <div class="image2">
          <a href="javascript:" class="link" @click="onclick2">
            <img width="100px" src="src/assets/img/deviceRunInfo.png"/>
            <p>设备运行数据</p>
          </a>
        </div>
        <div class="image3">
          <a href="javascript:" class="link" @click="onclick3">
            <img width="100px" src="src/assets/img/materialData.png"/>
            <p>物料管理</p>
          </a>
        </div>
        <div class="image4">
          <a href="javascript:" class="link" @click="onclick4">
            <img width="100px" src="src/assets/img/staffInfo.png"/>
            <p>人员数据</p>
          </a>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div style="font-weight:bold;font-size: 20px">累计数据</div>
      <el-form ref="record" :inline="true" size="small" style="margin: auto">
        <div class="cumulativeData">
          <div class="image1">
            <p>设备总数</p>
            <p class="data">{{ record.deviceInfoCount }}&nbsp;台</p>
          </div>
          <div class="image2">
            <p>设备运行数据</p>
            <p class="data">运转:{{ record.statusRun }}&nbsp;台</p>
            <p class="data">待机:{{ record.statusStandby }}&nbsp;台</p>
            <p class="data">离线:{{ record.statusOffline }}&nbsp;台</p>
          </div>
          <div class="image3">
            <p>物料数量</p>
            <p class="data">{{ record.materialCount }}&nbsp;个</p>
          </div>
          <div class="image4">
            <p>员工数量</p>
            <p class="data">{{ record.staffCount }}&nbsp;人</p>
          </div>
        </div>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <div style="font-weight:bold;font-size: 20px">设备状态</div>
      <div>
        <el-form ref="dataForm" size="mini" :inline="true" :model="dataForm">
          <div style="margin-left: 20px;padding-top:20px;">
            <el-row>
              <el-form-item label="请求日期:" prop="dateValue">
                <el-date-picker
                  v-model="dataForm.dateValue"
                  unlink-panels
                  align="right"
                  size="small"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyyMMdd"
                  placeholder="请求日期"
                  :picker-options="pickerOptions"
                  @change="dateChange"
                  :clearable="false"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" :loading="dataListLoading" @click="drawLineChart()">查询</el-button>
              </el-form-item>
            </el-row>
          </div>
        </el-form>
      </div>
      <div style="width:400px;height: 300px" ref="chart"/>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      dataForm: {
        dateValue: ''
      },
      record: {},
      dataListLoading: false,
      dataList: [],
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  activated () {
    this.queryCount()
    this.drawLineChart()
  },
  created () {
    const date = new Date()
    date.setTime(date.getTime() - 3600 * 1000 * 24)
    let dayMon = date.getMonth() + 1
    dayMon = dayMon < 10 ? '0' + dayMon : dayMon
    let dayDate = date.getDate()
    dayDate = dayDate < 10 ? '0' + dayDate : dayDate
    this.dataForm.dateValue = `${date.getFullYear()}${dayMon}${dayDate}`
    this.drawLineChart()
    this.queryCount()
  },
  methods: {
    // 跳转设备数据
    onclick1 () {
      this.$nextTick(() => {
        this.$router.push({
          path: '/device/deviceInfo'
        })
      })
    },
    // 跳转设备运行数据
    onclick2 () {
      this.$nextTick(() => {
        this.$router.push({
          path: '/device/deviceRunData'
        })
      })
    },
    // 跳转物料管理
    onclick3 () {
      this.$nextTick(() => {
        this.$router.push({
          path: '/materialData/index'
        })
      })
    },
    // 跳转人员数据
    onclick4 () {
      this.$nextTick(() => {
        this.$router.push({
          path: '/staffInfo/index'
        })
      })
    },
    // 绘制曲线
    drawLineChart () {
      // 初始化
      const that = this
      let myChart = that.$echarts.init(that.$refs.chart)
      const params = {}
      params.requestDate = this.dataForm.dateValue


      // 请求后台
      this.axios.get('/api/v1/device-run-data/status', {
        params
      }).then(function (resp) {
        if (resp.data.massage) {
          myChart.clear()
          that.record = ''
          return that.$message({
            message: resp.data.massage,
            type: 'error',
            duration: 3000
          })
        }
        var legendArr = []
        var data = []
        that.dataList = resp.data.data.dataList
        for (var i in that.dataList) {
          legendArr.push(that.dataList[i].deviceStatus)
          data.push({name: that.dataList[i].deviceStatus, value: that.dataList[i].statusCount})
        }
        console.log(data)
        console.log(legendArr)
        // 绘制图表
        myChart.setOption({
          title: {},
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'right',
            y: 'center',
            data: legendArr
          },
          series: [
            {
              name: '状态',
              type: 'pie',
              radius: '60%',
              center: ['40%', '50%'],
              data: data
            }
          ]
        })
        console.log('请求成功：' + resp.status + ',' + resp.statusText)
      }).catch(resp => {
        console.log('请求失败：' + resp.status + ',' + resp.statusText)
      })
    },
    // 查询总数
    queryCount () {
      const that = this
      const params = {}
      // 请求后台
      this.axios.get('/api/v1/cumulative-data/query', {
        params
      }).then(function (resp) {
        that.record = resp.data.data
        console.log('请求成功：' + resp.status + ',' + resp.statusText)
      }).catch(resp => {
        console.log('请求失败：' + resp.status + ',' + resp.statusText)
      })
    },
    // 触发器
    dateChange () {
      this.drawLineChart()
    }
  }
}
</script>
<style>
a {
  text-decoration: none
}

div p {
  font-size: 20px;
  color: #000;
}

.image {
  height: 150px;
  margin-top: 30px;
}

.image1 {
  height: 200px;
  margin-left: 60px;
  position: absolute;
}

.image2 {
  height: 200px;
  margin-left: 260px;
  position: absolute;
}

.image3 {
  height: 200px;
  margin-left: 460px;
  position: absolute;
}

.image4 {
  height: 200px;
  margin-left: 660px;
  position: absolute;
}

.cumulativeData {
  height: 100px;
  margin-top: 30px;
}

.data {
  font-size: 18px;
  color: #666;
}

</style>
